function newFolder(pid, fid, imgUrl) {
	var oldList = document.getElementById("contentList");
	$.captchacheck = "";

	$.ajax({
		type : "GET",
		traditional : true,
		url : "/ProjectBox/project/" + pid + "/" + fid
				+ "/getSuggestFolderName",
		async : false,
		data : "initialName=New Folder",
		dataType : "json",
		success : function(data) {
			$.captchacheck = data.suggestName;
		},
		error : function() {
		//	alert("error");
		}
	});

	// icon url
	var newFolderIcon = imgUrl + "/folder.png";
	var renameIcon = imgUrl + "/rename.png";
	var trashIcon = imgUrl + "/trash.png";

	/*
	 * alert("newFolderIcon: " + newFolderIcon); alert("newFolderIcon: " +
	 * renameIcon); alert("newFolderIcon: " + trashIcon);
	 */

	var newList = "<tr><td class='zeroborder_nowrap_js' width='20'><a href='#' ><img src='"
			+ newFolderIcon
			+ "' alt='Folder' height='20' width='18' /></a></td>"
			+ "<td class='zeroborder_nowrap_js' width='150' valign='middle' align='absmiddle'><div align='left' align='absmiddle'><a id='textNewfolder' href='#' >"
			+ $.captchacheck
			+ "</a>"
			+ "<input type='hidden' id='textboxNewFolder' /></div></td>"
			+ "<td class='zeroborder_nowrap_js' width='70' align='center' align='absmiddle'>Folder</td>"
			+ "<td class='zeroborder_nowrap_js' width='55'><div align='center' align='absmiddle'> - </div></td>"
			+ "<td class='zeroborder_nowrap_js' width='70'><div align='center'> - </div></td>"
			+ "<td class='zeroborder_nowrap_js' width='20'><div align='center'><a href='#'><img src='"
			+ renameIcon
			+ "' alt='Rename' width='18' height='20' align='absmiddle' /></a></div></td>"
			+ "<td  class='zeroborder_nowrap_js'><div align='center'> <a href='#'><img src='"
			+ trashIcon
			+ "' alt='Delete' width='18' height='20'  align='absmiddle'/></a></div></td>"
			+ "<td class='zeroborder_nowrap_js' width='20'><div align='center'></div></td> </tr>";
	// alert(newList.toString());
	var oldHtml = oldList.innerHTML;
	oldList.innerHTML = newList + oldHtml;
	var textNode = document.getElementById("textNewfolder");
	var textboxNode = document.getElementById("textboxNewFolder");

	clickRename("textNewfolder", "textboxNewFolder");

	$("#textboxNewFolder").focusout(
			function() {
				if (textboxNode.value == "") {
					textboxNode.value = $.captchacheck;
				}
				textNode.firstChild.nodeValue = textboxNode.value;
				textNode.style.display = 'block';
				textboxNode.setAttribute('type', 'hidden');

				if (fid === 0) {
					var url = "/ProjectBox/project/" + pid + "/createFolder";
					$.post(url, {
						folderName : textboxNode.value
					}, function(data) {
						location.reload();
					}).error(function() {
						alert("error");
						location.reload();
					});
				} else {
					var url = "/ProjectBox/project/" + pid + "/" + fid
							+ "/createFolder";
					// url = "<c:url value='/project/" + pid + "/" + fid +
					// "/renameFolder' />";
					$.post(url, {
						folderName : textboxNode.value
					}, function(data) {
						location.reload();
					}).error(function() {
						alert("error");
						location.reload();
					});
				}
			});
	$("#textboxNewFolder").keypress(
			function(e) {
				if (textboxNode.value === "") {
					textboxNode.value = $.captchacheck;
				}

				if (e.keyCode == 13) {
					textNode.firstChild.nodeValue = textboxNode.value;
					textNode.style.display = 'block';
					textboxNode.setAttribute('type', 'hidden');

					if (fid === 0) {
						var url = "/ProjectBox/project/" + pid
								+ "/createFolder";
						$.post(url, {
							folderName : textboxNode.value
						}, function(data) {
							// alert("done");
							location.reload();
						}).error(function() {
							alert("error");
							location.reload();
						});
					} else {
						var url = "/ProjectBox/project/" + pid + "/" + fid
								+ "/createFolder";
						// url = "<c:url value='/project/" + pid + "/" + fid +
						// "/renameFolder' />";
						$.post(url, {
							folderName : textboxNode.value
						}, function(data) {
							// alert("done");
							location.reload();
						}).error(function() {
							alert("error");
							location.reload();
						});
					}
				}
			});
}

function clickRename(textNodeID, textboxNodeID) {
//	alert("click name");
	var textNode = document.getElementById(textNodeID);
	var textValue = textNode.firstChild.nodeValue;
	var textboxNode = document.getElementById(textboxNodeID);
	textboxNode.setAttribute('value', textValue);
	textNode.style.display = 'none';
	textboxNode.setAttribute('type', 'text');
	textboxNode.focus();
	textboxNode.select();
}

function changeName(textNodeID, textboxNodeID, pid, fid, rid) {
	var textNode = document.getElementById(textNodeID);
	var textboxNode = document.getElementById(textboxNodeID);
	if (textboxNode.value === "") {
		textboxNode.value = textNode.firstChild.nodeValue;
		textNode.style.display = 'block';
		textboxNode.setAttribute('type', 'hidden');
	} else {
		textNode.firstChild.nodeValue = textboxNode.value;
		textNode.style.display = 'block';
		textboxNode.setAttribute('type', 'hidden');
		var url = null;
		if (rid === 0) {
			url = "/ProjectBox/project/" + pid + "/" + fid + "/renameFolder";
			// url = "<c:url value='/project/" + pid + "/" + fid +
			// "/renameFolder' />";
			// alert("textnode " + textboxNode.value);
			$.post(url, {
				fname : textboxNode.value
			}, function(data) {
				processConflictName(data, textNodeID);
			}).error(function() {
				alert("error");
				location.reload();
			});
		} else {
			url = "/ProjectBox/project/" + pid + "/renameResource";
			$.post(url, {
				rid : rid,
				rname : textboxNode.value
			}, function(data) {
				processConflictName(data, textNodeID);
			}).error(function() {
				alert("error");
				location.reload();
			});
		}
	}
}

function processConflictName(nameInfo, textNodeID) {
	textNode = document.getElementById(textNodeID);
	if (nameInfo.suggestName !== null) {
		var answer = confirm("A resource with the same name already exists, Do you still want to rename it?");
		if (answer) {
			textNode.firstChild.nodeValue = nameInfo.suggestName;

			if (nameInfo.type === "folder") {
				// url = "<c:url value='/project/" + nameInfo.pid + "/" +
				// nameInfo.id + "/renameFolder'/>";
				url = "/ProjectBox/project/" + nameInfo.pid + "/" + nameInfo.id
						+ "/renameFolder";
				$.post(url, {fname : nameInfo.suggestName}, function(data) {
					processConflictName(data, textNodeID);
				}).error(function() {
				//	alert("error");
				});
			} else {
				// url = "<c:url value='/project/" + nameInfo.pid +
				// "/renameResource' />";
				url = "/ProjectBox/project/" + nameInfo.pid + "/renameResource";
				$.post(url, {rid : nameInfo.id, rname : nameInfo.suggestName}, function(data) {
					processConflictName(data, textNodeID);
				}).error(function() {
				//	alert("error");
				});
			}
		} else {
			textNode.firstChild.nodeValue = nameInfo.oldName;
		}		
	} else {
		var typeId = getTypeId(textNodeID);
		typeNode = document.getElementById(typeId);
		if(typeNode === null){
			location.reload();
			return;
		}
		typeNode.firstChild.nodeValue = nameInfo.type;
	}
	location.reload();
}

function getTypeId(textNode) {
	// alert(textNode);
	var type = "type";
	type += textNode.substring(4);
	return type;
}

$(".finput").focusout(function() {
	id = this.id;
	var str = id.substring(0, 4);
	str += id.substring(7);
	document.getElementById(str).style.display = 'block';
	document.getElementById(id).setAttribute('type', 'hidden');
});

$(document).ready(function() {

	// if user clicked on button, the overlay layer or the dialogbox, close the
	// dialog
	$("#close").click(function() {
		$('#dialog-overlay, #dialog-box').hide();
		return false;
	});

	// if user resize the window, call the same function again
	// to make sure the overlay fills the screen and dialogbox aligned to center
	$(window).resize(function() {

		// only do it if the dialog box is not hidden
		if (!$('#dialog-box').is(':hidden'))
			popup();
	});	
	
});

$(".myform").validate({
	rules : {
		file :  {
			required : true,
			maxlength: 40
		}
	},
	messages: {
		file: "Sorry, file name is too long!"
    }
});
// Popup dialog
function popup(message) {

	// get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();

	// calculate the values for center alignment
	var dialogTop = (maskHeight / 3) - ($('#dialog-box').height());
	var dialogLeft = (maskWidth / 2) - ($('#dialog-box').width() / 2);

	// assign values to the overlay and dialog box
	$('#dialog-overlay').css({
		height : maskHeight,
		width : maskWidth
	}).show();
	$('#dialog-box').css({
		top : dialogTop,
		left : dialogLeft
	}).show();
}

$("#createFolder").live("mouseover",function() {
//	alert("folder");
	$(this).qtip({
		overwrite : true,
		content : {
					// Set the text to an image HTML string with the correct src
					// URL to the loading image you want to use
			text : 'New Folder',
		},
		position : {
			corner : {
				target : 'top', // Position the tooltip above
												// the link
			//	tooltip : 'bottom'
			},
			adjust : {
			screen : true, // Keep the tooltip on-screen at all
										// times
			x : -50,
			y : -45
			}},
		show : {
			ready : true,
			delay : 0,
			event : 'mouseenter',
			solo : true
				// Only show one tooltip at a time
		},
		hide : {
			event : 'mouseleave',
			delay : 0,
			fixed : true
		},
		style : {
			tip : 'bottomMiddle', // Apply a speech bubble tip to the
										// tooltip at the designated tooltip
										// corner
			border : {
			width : 0,
			radius : 4
			},
		background : '#6495ed', // Use the default light style
		width : 72, // Set the tooltip width
		}
	})
});

$("#uploadFile").live("mouseover",function() {
//	alert("folder");
	$(this).qtip({
		overwrite : true,
		content : {
					// Set the text to an image HTML string with the correct src
					// URL to the loading image you want to use
			text : 'Upload File',
		},
		position : {
			corner : {
				target : 'top', // Position the tooltip above
												// the link
			//	tooltip : 'bottom'
			},
			adjust : {
			screen : true, // Keep the tooltip on-screen at all
										// times
			x : -50,
			y : -45
			}},
		show : {
			ready : true,
			delay : 0,
			event : 'mouseenter',
			solo : true
				// Only show one tooltip at a time
		},
		hide : {
			event : 'mouseleave',
			delay : 0,
			fixed : true
		},
		style : {
			tip : 'bottomMiddle', // Apply a speech bubble tip to the
										// tooltip at the designated tooltip
										// corner
			border : {
			width : 0,
			radius : 4
			},
		background : '#6495ed', // Use the default light style
		width : 70, // Set the tooltip width
		}
	})
});

$(".renameF").live("mouseover",function() {
//	alert("folder");
	$(this).qtip({
		overwrite : true,
		content : {
					// Set the text to an image HTML string with the correct src
					// URL to the loading image you want to use
			text : 'Rename',
		},
		position : {
			corner : {
				target : 'top', // Position the tooltip above
												// the link
			//	tooltip : 'bottom'
			},
			adjust : {
			screen : true, // Keep the tooltip on-screen at all
										// times
			x : -35,
			y : -43
			}},
		show : {
			ready : true,
			delay : 0,
			event : 'mouseenter',
			solo : true
				// Only show one tooltip at a time
		},
		hide : {
			event : 'mouseleave',
			delay : 0,
			fixed : true
		},
		style : {
			tip : 'bottomMiddle', // Apply a speech bubble tip to the
										// tooltip at the designated tooltip
										// corner
			border : {
			width : 0,
			radius : 4
			},
		background : '#6495ed', // Use the default light style
		width : 55, // Set the tooltip width
		}
	})
});

$(".deleteF").live("mouseover",function() {
//	alert("folder");
	$(this).qtip({
		overwrite : true,
		content : {
					// Set the text to an image HTML string with the correct src
					// URL to the loading image you want to use
			text : 'Delete',
		},
		position : {
			corner : {
				target : 'top', // Position the tooltip above
												// the link
			//	tooltip : 'bottom'
			},
			adjust : {
			screen : true, // Keep the tooltip on-screen at all
										// times
			x : -35,
			y : -42
			}},
		show : {
			ready : true,
			delay : 0,
			event : 'mouseenter',
			solo : true
				// Only show one tooltip at a time
		},
		hide : {
			event : 'mouseleave',
			delay : 0,
			fixed : true
		},
		style : {
			tip : 'bottomMiddle', // Apply a speech bubble tip to the
										// tooltip at the designated tooltip
										// corner
			border : {
			width : 0,
			radius : 4
			},
		background : '#6495ed', // Use the default light style
		width : 35, // Set the tooltip width
		}
	})
});

$(".downloadFile").live("mouseover",function() {
//	alert("folder");
	$(this).qtip({
		overwrite : true,
		content : {
					// Set the text to an image HTML string with the correct src
					// URL to the loading image you want to use
			text : 'Download',
		},
		position : {
			corner : {
				target : 'top', // Position the tooltip above
												// the link
			//	tooltip : 'bottom'
			},
			adjust : {
			screen : true, // Keep the tooltip on-screen at all
										// times
			x : -40,
			y : -43
			}},
		show : {
			ready : true,
			delay : 0,
			event : 'mouseenter',
			solo : true
				// Only show one tooltip at a time
		},
		hide : {
			event : 'mouseleave',
			delay : 100,
			fixed : true
		},
		style : {
			tip : 'bottomMiddle', // Apply a speech bubble tip to the
										// tooltip at the designated tooltip
										// corner
			border : {
			width : 0,
			radius : 4
			},
		background : '#6495ed', // Use the default light style
		width : 65, // Set the tooltip width
		}
	})
});
